/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="select-algorithm-type__container">
        <div class="select-algorithm__type">
            <div v-for="(item,index) in selectAlgorithmTypeList" 
                 :key="index" 
                 class="algorithm-type__item">
                <div class="left"
                     :class="{'active':isAutoMl === item.isAutoMl}"
                     @click="selectAlgorithmType(item)">
                    <i class="icon iconfont"
                       :class="item.leftIcon"></i>
                    <div class="name text-center">
                        {{ item.leftName }}
                    </div>
                    <div class="content">
                        {{ item.leftContent }}
                    </div>
                </div>
                <div class="center">
                    <i class="icon iconfont iconsip-return"></i>
                </div>
                <div class="right">
                    <i class="icon iconfont"
                       :class="item.rightIcon"></i>
                    <div class="content">
                        {{ item.rightContent }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>


export default {
    data () {
        return {
            isAutoMl:-1,
            selectAlgorithmTypeList: [{
                leftIcon:'iconkuaisu_jiasu',
                leftName:_('快速模型'),
                leftContent:_('简单快速使用通用算法模板构建模型'),
                rightIcon:'iconchengyuan',
                rightContent:_('如果您是AI小白，不知道如何选择算法，推荐使用快速模型,简单几步帮助您快速出模型'),
                isAutoMl:1
            }, {
                isAutoMl:0,
                leftIcon:'icontiaozheng',
                leftName:_('自定义算法'),
                leftContent:_('自定义选择一个算法模板，支持调参'),
                rightIcon:'iconzhaozhuanjia',
                rightContent:_('如果你是AI专家，可在此选择预置通用算法模板及自定义算法模板进行训练，可助您快速调参。')
            }]
        };
    },
    methods: {
        selectAlgorithmType (record) {
            this.isAutoMl = record.isAutoMl;
            this.$emit('select-algorithm-type', record.isAutoMl);
        },
        getJsonValue () {
            return {
                isAutoMl:this.isAutoMl
            };
        },
        setJsonValue (data) {
            this.isAutoMl = data.isAutoMl;
        }

    }
    
};
</script>
<style lang="less" scoped>
.select-algorithm-type__container{
    margin-top: 20px;
    .algorithm-type__item{
        margin-bottom: 30px;
        display: flex;
        align-items: center;
        .left{
            border:1px solid #dee3ed;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 180px;
            height: 176px;
            border-radius: 6px;
            cursor: pointer;
            &:hover,&:active,&.active{
                border:2px solid #204ED9;
            }
            .iconfont{
                color: #1296db;
                font-size: 40px;
                margin-bottom: 10px;
                text-align: center;
            }
            .name{
                color: #14161A;
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 10px;
            }
            .content{
                margin: 0 30px;
                line-height: 18px;
                text-align: center;
                color:#999;
            }
        }
        .center{
            margin-left: 50px;
            margin-right: 30px;
            .iconfont{
               font-size: 40px;
               color: #ddd;
            }
         
        }
        .right{
            display: flex;
            width: 358px;
            .iconfont{
                font-size: 60px;
                margin-right: 15px;
                color: #999;
            }
            .content{
                margin-top: 13px;
                line-height: 20px;
                color:#999;
            }
        }
    }
    
    
}
</style>
      